<template>
   <div class="progressWeight">
        <div class="top">
           <span class="name">一致性比例：</span> 
           <span class="num">{{ num }}</span> 
        </div>
        <div class="weightBox">
            <div class="header flex-row column-center">
                <div class="name">要素</div>
                <div class="progress">权重</div>
            </div>
            <div class="weight flex-row column-center"  v-for="(item ,i) in data" :key="i">
                <div class="name" :title="item.label">{{ item.label }}</div>
                <div class="progress">
                    <el-progress :percentage="(item.num*100)" :show-text="false" style="width: 70%; display: inline-block;"></el-progress>
                    &nbsp; &nbsp;<span class="num">{{ item.num }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    name: "capacityBox",
    props: {
        num: {
            type: [Number, String],
            default: "89.08",
        },
        data: {
            type: Array,
            default: () => [
                { label: 'JR能力', num: '0.2'},
                { label: '吞吐量保障能力', num: '0.3'},
                { label: '可靠CS能力', num: '0.6'},
                { label: '性能保证能力', num: '0.2'},
                { label: 'YW支撑能力', num: '0.6'},
                { label: '绝对重要/有优势', num: '0.7'},
            ]
        }
    },
    data() {
        return {
           
        };
    },
    watch: {
        data:{
            handler(newVal){
                this.data = newVal;
            },
            deep: true
        }
    },
    methods:{
        blockClick(val){
            this.$emit('handleScore', val)
        }
    },
    mounted() {},
};
</script>
<style lang="scss">
.progressWeight{
    width: 100%;
    height: 100%;
    font-family: Alibaba PuHuiTi;
    font-size: 12px;
    font-weight: 400;
    padding-left: 15px;
    .top {
        height: 48px;
        line-height: 48px;
        .name{
            font-size: 16px;
            color: #515558;
        }
        .num{
            font-size: 18px;
            font-family: DINPro;
            font-weight: 500;
            font-style: italic;
            color: #3670F5;
            line-height: 19px;
            text-shadow: 0px 2px 2px rgba(0,16,53,0.1);
        }
    }
    .weightBox{
        color: #646D7E;
        height: calc(100% - 48px);
        overflow-y: scroll;
        .name{
            width: 45%;
            min-height: 25px;
            line-height: 20px;
            white-space: nowrap; /* 防止换行 */
            overflow: hidden; /* 控制元素溢出部分不显示 */
            text-overflow: ellipsis; /* 使用省略号表示被裁切的文本 */
        }
        .progress{
            width: 55%
        }
    }
}
</style>